<template>
    <div class="main-box">
        <van-sticky :offset-top="0">
            <div class="search-bar">
                <div class="avatar"></div>
                <div class="search-box">
                    <div class="left">
                        <van-icon name="fire-o" />
                        <span>土楼亲子游住宿推荐</span>
                    </div>
                    <van-icon name="search" />
                </div>
                <div class="controls">
                    <van-icon name="clock-o" />
                    <van-icon name="plus" />
                </div>
            </div>
        </van-sticky>
        <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList">
                <div class="img-box">
                    <img :src="item.imageUrl"/>
                </div>
            </van-swipe-item>
        </van-swipe>

        <!--<div v-for="item in bannerList">-->
            <!--<img :src="item.url">-->
        <!--</div>-->
        <recommend></recommend>
    </div>
</template>

<script>
    import { Sticky, Icon, Swipe, SwipeItem } from 'vant';
    import Recommend from './components/recommend';

    export default {
        name: 'home',
        components: {
            'van-sticky': Sticky,
            'van-icon': Icon,
            'van-swipe': Swipe,
            'van-swipe-item': SwipeItem,
            Recommend
        },
        data() {
            return {
                bannerList: []
            }
        },
        created() {
            this.$API.home.banner.list().then(res => {
                this.bannerList = res.data
            })
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
.main-box {
    width: 750px;
    .search-bar {
        background: #2c3642;
        height: 126px;
        padding: 0 10px;
        @include flexBox(space-around, center);
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: $main-color;
        }
        .search-box {
            width: 460px;
            height: 64px;
            border-radius: 50px;
            background: #3e4454;
            font-size: 42px;
            color: $text-white;
            padding: 0 10px;
            @include flexBox(space-between, center);
            .van-icon {
                margin: 0 10px;
                &.van-icon-search {
                    color: $main-color;
                    font-weight: 700;
                }
            }
            .left {
                @include flexBox(flex-start, center);
                span {
                    margin-left: 10px;
                    font-size: 24px;
                }
            }
        }
        .controls {
            font-size: 42px;
            color: $text-white;
            .van-icon {
                margin: 0 10px;
            }
        }
    }
    .my-swipe {
        width: 750px;
        height: 450px;
        .img-box {
            width: 100%;
            height: 100%;
            img {
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
}
</style>
